/* Adjusted from https://github.com/withastro/starlight/blob/2953c4e4bd52d8e30a3c9f2208acd31da096ee15/packages/starlight/user-components/Steps.astro - LICENSE: MIT */

.container {
  --bullet-size: calc(var(--ifm-line-height-base) * 1rem);
  --bullet-margin: 0.375rem;

  list-style: none;
  counter-reset: steps-counter 0;
  padding-inline-start: 0;

  > li {
    counter-increment: steps-counter;
    position: relative;
    padding-inline-start: calc(var(--bullet-size) + 1rem);
    /* HACK: Keeps any `margin-bottom` inside the `<li>`’s padding box to avoid gaps in the hairline border. */
    padding-bottom: 1px;
    /* Prevent bullets from touching in short list items. */
    min-height: calc(var(--bullet-size) + var(--bullet-margin));
  }

  > li + li {
    /* Remove margin between steps. */
    margin-top: 0;
  }

  /* Custom list marker element. */
  > li::before {
    content: counter(steps-counter);
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: var(--bullet-size);
    height: var(--bullet-size);
    line-height: var(--bullet-size);

    font-size: var(--ifm-code-font-size);
    font-weight: 600;
    text-align: center;
    color: var(--mastra-text-secondary);
    background-color: var(--mastra-surface-4);
    border-radius: 99rem;
    box-shadow: inset 0 0 0 1px var(--mastra-surface-5);
  }

  /* Vertical guideline linking list numbers. */
  > li::after {
    --guide-width: 1px;
    content: "";
    position: absolute;
    top: calc(var(--bullet-size) + var(--bullet-margin));
    bottom: var(--bullet-margin);
    inset-inline-start: calc((var(--bullet-size) - var(--guide-width)) / 2);
    width: var(--guide-width);
    background-color: var(--mastra-surface-4);
  }

  /* Adjust first item inside a step so that it aligns vertically with the number even if using a larger font size (e.g. a heading) */
  > li > :first-child {
    /*
		The `lh` unit is not yet supported by all browsers in our support matrix
		— see https://caniuse.com/mdn-css_types_length_lh
		In unsupported browsers we approximate this using our known line-heights.
		*/
    --lh: calc(1em * var(--ifm-line-height-base));
    --shift-y: calc(0.5 * (var(--bullet-size) - var(--lh)));
    transform: translateY(var(--shift-y));
  }

  > li > :first-child:where(h1, h2, h3, h4, h5, h6) {
    --lh: calc(1em * var(--ifm-heading-line-height));
  }
}

@supports (--prop: 1lh) {
  .container > li > :first-child {
    --lh: 1lh;
  }
}
